<template>
  <div>
    <div style="margin: 20px;">login page</div>
    <el-table :data="tableData" border>
      <el-table-column prop="name" label="名称"></el-table-column>
      <el-table-column prop="price" label="价格"></el-table-column>
      <el-table-column prop="count" label="数量">
        <template #default="{ row }">
          <el-input-number v-model="row.count" />
        </template>
      </el-table-column>
      <el-table-column prop="count" label="总数">
        <template #default="{ row }">
          {{ getTotal(row) }}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
type RowDataType = { name: string, price: number, count: number }

const tableData = ref<RowDataType[]>([
  { name: '苹果', price: 30, count: 10 },
  { name: '李子', price: 16, count: 5 },
])

const useComputed = (func: Function) => {
  const map = new Map()
  return function(...args: any[]) {
    const key = JSON.stringify(args)
    if(map.has(key)) {
      return map.get(key)
    }
    const result = computed(() => func(...args))
    map.set(key, result)
    return result
  }
}

const getTotal = useComputed((row: RowDataType) => {
  console.log('get total')
  return row.price * row.count
})

</script>